<template>
  <div class="list space">
    <MyNavBar
      title="列表"
      left-arrow
      @click-left="leftArrowClick"
      fixed
    ></MyNavBar>
    <div class="tab">
      <van-tabs v-model="activeIndex">
        <van-tab :title="item.catename" v-for="item of allCate" :key="item.id">
          <div style="padding-top: -100px">
            <MyArticleList
              space
              :cateid="item.id + ''"
              type="4"
            ></MyArticleList>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import MyNavBar from '@/components/MyNavBar.vue'
import MyArticleList from '@/components/MyArticleList.vue'
import { mapGetters } from 'vuex'
export default {
  name: 'list',
  data() {
    return {
      curCateId: this.$route.query.cateid
    }
  },
  methods: {
    leftArrowClick() {
      this.$router.back()
    }
  },
  computed: {
    ...mapGetters(['allCate']),
    activeIndex: {
      get() {
        return this.allCate.findIndex((cate) => cate.id === this.curCateId) || 0
      },
      set(activeIndex) {
        this.curCateId = this.allCate[activeIndex].id
      }
    }
  },
  components: {
    MyNavBar,
    MyArticleList
  }
}
</script>

<style lang="less" scoped></style>
